<template>
    <div>
      <el-card>
        <el-descriptions class="margin-top" title="个人中心" :column="2" border>
          <template slot="extra">
            <el-button type="primary" v-if="this.code==0" @click="handleEdit" size="small">修改</el-button>
            <el-button type="primary" @click="login" v-if="this.code!=0" size="small">去登陆</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture-outline"></i>
              头像
            </template>
            <img class="img" :src="avatar" alt="" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              账户名
            </template>
            {{ studentID }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              姓名
            </template>
            {{ nickname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              注册日期
            </template>
            {{ createTime }}
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-odometer"></i>
              年龄
            </template>
            {{ age }}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-male"></i>
              <i class="el-icon-female"></i>
              性别
            </template>
            <el-tag size="small">{{ gender }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱Email
            </template>
            {{ email }}
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号码
            </template>
            {{ mobilePhoneNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              地区
            </template>
            {{ area }}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              学院
            </template>
            {{ college }}
          </el-descriptions-item>
  
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-basketball"></i>
              专业
            </template>
            {{ major }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-magic-stick"></i>
              角色
            </template>
            {{ role }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              最近修改
            </template>
            {{ updateTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 编辑弹出框 -->
      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="学号">
                    <el-input v-model="form.studentID"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <!-- <el-input v-model="form.gender"></el-input> -->
                    <el-select v-model="form.gender" clearable placeholder="请选择" class="formSelect">
                        <el-option label="男" value = "1"></el-option>
                        <el-option label="女" value = "0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="学院">
                    <el-input v-model="form.college"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="form.major"></el-input>
                </el-form-item>
                <!-- <el-form-item label="头像">
                    <el-input v-model="form.userAvatar"></el-input>
                </el-form-item> -->
                <el-form-item label="角色">
                    <!-- <el-input v-model="form.userRole"></el-input> -->
                    <el-select v-model="form.userRole" clearable placeholder="请选择" class="formSelect">
                        <el-option label="普通用户" value="user"></el-option>
                        <el-option label="管理员" value="admin"></el-option>
                        <el-option label="维护者" value="maintainer"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.userPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </template>
  
  <script>
import { getLoginUser,updateUser,getUserById } from '../../api';
  export default {
    name: "Info",
    data() {
      return {
        college:'',
        createTime:'',
        updateTime:'',
        email: '',
        gender: '',
        major:'',
        avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.q1_lxgBodQG9LKZuE1pAfwHaHa?pid=ImgDet&rs=1',
        studentID: '未登录',
        
        nickname: '',
        
        role: '',
        code:'',
        editVisible:false,
        form: {},
      };
    },
    mounted() {
      this.load();
    },
    methods: {
      load() {
        getLoginUser().then(res => {
          this.code = res.code
            if(res.code != 0){
              this.$message.error('未登录，请先登录！')
            }else {
              let param={
                id:Number
              }
              param.id=res.data.id
              getUserById(param).then(response=>{
                this.userInfo=response.data
                this.form=response.data
                
                this.college= this.userInfo.college
                this.createTime= this.userInfo.createTime
                this.updateTime= this.userInfo.updateTime
                this.email= this.userInfo.email
                this.gender= this.userInfo.gender==1 ? '男' : '女'
                this.major= this.userInfo.major
                if(this.userInfo.userAvatar != '' && this.userInfo.userAvatar != null){
                  this.avatar = this.userInfo.userAvatar
                }
                this.studentID= this.userInfo.studentID
                this.nickname= this.userInfo.userName
                this.role= this.userInfo.userRole
              })
              
            }
            
        })
        
      },
      login(){
        this.$router.push('/login')
      },
      // 编辑操作
      handleEdit() {
        this.form.gender=this.form.gender+''
        this.editVisible = true;
      },
      // 保存编辑
      saveEdit() {
          this.editVisible = false;
          updateUser(this.form).then(res => {
              if(res.code!=0){
                  this.$message.error(res.message)
              }else{
                  this.$message.success(`修改成功!`);
                  this.userInfo=this.form
                  this.load()
              }
          }).catch(err => {
              this.$message.error('修改失败!')
          })
      },
    },
  };
  </script>
  
  <style scoped>
  .img {
    width: 80px;
    height: 80px;
  }
  </style>
  